<script setup lang="ts">
import ImgUpload, {type img} from "@/components/ImgUpload/index.vue";
import HanfuTypeComponent from "@/views/hanfu/type/component/hanfuTypeComponent.vue";
import {addHanfu, type hanfuDto, putHanfu, putHanFuImg} from "@/apis/hanfu/hanfu";
import {useUserStore} from "@/stores";
import {ref, type Ref} from "vue"
import {Notification} from "@arco-design/web-vue";

/**
 * 汉服窗口显示
 */
const visible:Ref<Boolean> = defineModel("visible", {
  type: Boolean,
  default: false
})

/**
 * 汉服dto
 */
const hanFuDto:Ref<hanfuDto> = defineModel("dto",{
  type:Object,
  default: {
      id:0,
      typeId:0,
      typeName:'',
      name:'',
      price: '',
      ossId:0,
      description: "",
      updataBy:useUserStore().userInfo.id,
      status:0,
      file: []
  }
})

/**
 * 汉服图片列表
 */
const hanFuImg:Ref<img[]> = defineModel("img", {
  type:Array<img>,
  default: []
})

const props = defineProps({
  title: {
    type:String,
    default: "汉服"
  },

})

const emit = defineEmits(["ok"])

/**
 * 选择汉服类型显示
 */
const selectHanFuTypeVisible = ref(false)


/**
 * 选择汉服类型
 */
const selectType = (data:any) => {
  hanFuDto.value.typeId = data.hanfuTypeId
  hanFuDto.value.typeName = data.hanfuTypeName
  selectHanFuTypeVisible.value = !selectHanFuTypeVisible.value
}

/**
 * 点击成功回调
 */
const handleOk = async () => {
  visible.value = !visible.value
  clearHanFuFormData()
  if (props.title === "新增汉服") {
    //新增逻辑
    await new Promise(resolve => {
      newHanFu().then(res => {
        if (res) {
          //弹窗提示没写 ok
        } else {
          Notification.success({
            title: '成功',
            content: 'success!',
            duration: 3000,
          })
        }
        resolve(res)
      })
    })


  } else {
    //修改逻辑
    await new Promise(resolve => {
      putHanFu().then(res => {
        Notification.success({
          title: '成功',
          content: 'success!',
          duration: 3000,
        })
        resolve(res)
      })
    })
  }

  emit("ok")
}

/**
 * 点击取消回调
 */
const handleCancel = () => {
  visible.value = !visible.value
  clearHanFuFormData()
}

/**
 * 清除表单
 */
const clearHanFuFormData = () => {
  hanFuDto.value = {
    id:0,
    typeId:0,
    name:'',
    price: '',
    ossId:"",
    description: "",
    updataBy:useUserStore().userInfo.id,
    status:0,
    file: [],
    typeName:'',
  }
  hanFuImg.value = []
}

/**
 * 选择图片
 */
const selectImg = (data:Ref<img[]>) => {
  hanFuImg.value = data.value
}

/**
 * 删除图片
 */
const delImg = (data:Ref<img[]>) => {
  hanFuImg.value = data.value
}

/**
 * 新增
 */
const newHanFu = async () => {

  let formData = new FormData()
  formData.append("name", hanFuDto.value.name)
  formData.append("price", hanFuDto.value.price)
  formData.append("user", useUserStore().userInfo.id)
  formData.append("des", hanFuDto.value.description)
  formData.append("typeId", hanFuDto.value.typeId + "")
  formData.append("status", hanFuDto.value.status + "")

  //添加图片
  for (let i = 0; i < hanFuImg.value.length;i++) {
    formData.append("img", hanFuImg.value[i].file, hanFuImg.value[i].fileName)
  }

  if (hanFuImg.value.length == 0){
    //没有套装图片
    formData.append("img",new Blob,"undefined")

  }

  //提交表单
  return await addHanfu(formData).then(res => {
    return res.msg === "ok";
  })
}

/**
 * 修改汉服
 */
const putHanFu = async () => {
  let ossId = ""
  let hanfuId = hanFuDto.value.id;
  let formData = new FormData()
  hanFuImg.value.forEach(i => {
      if (!i.isNow) {
        ossId += i.id + ","
      }
  })



  ossId = ossId.substring(0, ossId.length - 1)
  hanFuDto.value.file = []

  hanFuImg.value.forEach(i => {
    if (i.isNow) {
      formData.append("img", i.file)
    }
  })




  await new Promise(resolve => {
    putHanfu(hanFuDto.value).then(res => {
      resolve(res)
    })
  })

  if (formData.get("img") == null) {
    formData.append("img", new Blob())
  }

  formData.append("ossId", ossId)
  formData.append("user", useUserStore().userInfo.id)
  formData.append("id", hanfuId + "")
  await new Promise(resolve => {
    putHanFuImg(formData).then(res => {
      resolve(res)
    })
  })

}



</script>

<template>

  <a-modal width="1000px" v-model:visible="selectHanFuTypeVisible" >
    <hanfu-type-component width="1200px" @select="selectType"></hanfu-type-component>
  </a-modal>

  <a-modal width="800px" v-model:visible="visible" @ok="handleOk" @cancel="handleCancel" >
    <template #title>
      {{ title }}
    </template>
    <a-form labelAlign="right" :model="hanFuDto" >

      <a-form-item label="汉服名称">
        <a-input
            v-model="hanFuDto.name"
            placeholder="请输入汉服名称..."
        />
      </a-form-item>
      <a-form-item  label="汉服类型名称">
        <a-input :disabled="true" v-model="hanFuDto.typeName" />
        <a-button @click="selectHanFuTypeVisible = true">选择</a-button>
      </a-form-item>
      <a-form-item label="汉服价格">
        <a-input
            v-model="hanFuDto.price"
            type="number"
            placeholder="请输入汉服价格..."
        />
      </a-form-item>

      <a-form-item label="汉服图片">
        <ImgUpload @imgs="selectImg" @del-img="delImg" :src="hanFuImg" ></ImgUpload>
      </a-form-item>

      <a-form-item  label="汉服描述">
        <a-textarea v-model="hanFuDto.description"></a-textarea>
      </a-form-item>

      <a-form-item label="汉服状态">
        <a-select v-model="hanFuDto.status" placeholder="请选择状态">
          <a-option :value="1">上架</a-option>
          <a-option :value="0">下架</a-option>
        </a-select>
      </a-form-item>

    </a-form>

  </a-modal>
</template>

<style scoped lang="scss">

</style>